<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/plugin/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="/plugin/layui/css/layui.css" />
    <link rel="stylesheet" href="/plugin/swiper/swiper.min.css" />
    <link rel="stylesheet" href="/css/myAnimate.css" />
    <link rel="stylesheet" href="/css/common.css" />
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="stylesheet" href="/css/animate.css" />
    <link rel="stylesheet" href="/css/fonts/iconfont.css" />

    <!-- <link rel="stylesheet" href="/css/gray_theme.css" /> -->
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/common.js"></script>
    <script type="text/javascript" src="/js/echarts.min.js"></script>
    <script
      type="text/javascript"
      src="/plugin/bootstrap/js/bootstrap.min.js"
    ></script>
    <script type="text/javascript" src="/plugin/layui/layui.js"></script>
    <style>
      .itemEcharts {
        height: 240px;
        width: 25%;
        border-right: 1px solid #d6d6d6;
      }
      .itemEcharts:last-child {
        border: 0;
      }
    </style>
  </head>
  <body class="child_body">
    <div class="formModal flex">
      <div class="itemEcharts flex-1" id="echartsDemo1"></div>
      <div class="itemEcharts flex-1" id="echartsDemo2"></div>
      <div class="itemEcharts flex-1" id="echartsDemo3"></div>
      <div class="itemEcharts flex-1" id="echartsDemo5"></div>
      <div class="itemEcharts flex-1" id="echartsDemo4"></div>
    </div>
    <div class="formModal m-t-15">
      <ul class="comTab clearfix">
        <li class="active">待接收</li>
        <li>待处置</li>
      </ul>
      <div class="p-l-r-15 m-t-15">
        <table id="formTableList"></table>
      </div>
    </div>
  </body>
  <script>
    $(function () {
      initEcharts({
        id: "echartsDemo1",
        title: "通报中心",
        data: [
          { value: 1, name: "待提交" },
          { value: 2, name: "待核验" },
          { value: 11, name: "待派发" },
          { value: 9, name: "待处置" },
          { value: 1, name: "待审核" },
          { value: 2, name: "待归档" },
        ],
      });
      initEcharts({
        id: "echartsDemo2",
        title: "超时反馈状态",
        data: [
          { value: 0, name: "已超时" },
          { value: 0, name: "未超时" },
          { value: 424, name: "未知" },
        ],
      });
      initEcharts({
        id: "echartsDemo3",
        title: "公告中心",
        data: [
          { value: 0, name: "待发布" },
          { value: 100, name: "已发布" },
        ],
        radius: ["40%", "50%"],
      });
      initEcharts({
        id: "echartsDemo5",
        title: "最新公告",
        data: [
          { value: 0, name: "已读公告" },
          { value: 0, name: "未读公告" },
        ],
        radius: ["40%", "50%"],
      });
      initEcharts({
        id: "echartsDemo4",
        title: "信息资产上报通知",
        data: [
          { value: 0, name: "待处置" },
          { value: 0, name: "待审核" },
          { value: 0, name: "已完成" },
        ],
        radius: ["40%", "50%"],
      });
      $(".comTab")
        .off("click", "li")
        .on("click", "li", function () {
          $(this).addClass("active").siblings().removeClass("active");
        });
      $.layuiTable({
        id: "formTableList",
        cols: [
          { type: "checkbox", fixed: "left" },
          {
            field: "name",
            title: "服务名",
          },
          {
            field: "sum",
            title: "金额",
          },
          {
            field: "PV",
            title: "访问量",
          },
          {
            field: "name",
            title: "服务名",
          },
          {
            field: "sum",
            title: "金额",
          },
          {
            field: "PV",
            title: "访问量",
          },
        ],
        data: [
          { name: "测试", sum: 100, PV: 100, operate: "" },
          { name: "张三", sum: 10, PV: 105, operate: "" },
          { name: "测试", sum: 100, PV: 100, operate: "" },
          { name: "张三", sum: 10, PV: 105, operate: "" },
          { name: "测试", sum: 100, PV: 100, operate: "" },
          { name: "张三", sum: 10, PV: 105, operate: "" },
          { name: "测试", sum: 100, PV: 100, operate: "" },
        ],
      });
    });

    function initEcharts(options) {
      var chartDom = document.getElementById(options.id);
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: options.title,
          left: "15",
          top: "15",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
          show: false,
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: options.radius || "50%",
            data: options.data,
            label: {
              show: true,
              formatter(param) {
                return param.name + ":" + param.value;
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    }
  </script>
</html>
